---
id: basic-usage
title: 基本用法
---

`<BaseTable />` 是 ali-react-table 中最主要的表格组件，其提供了基本的表格渲染能力。BaseTable 自带了一些非常实用的特性（表头吸顶、加载动画、锁列、单元格合并、页脚等），并自带虚拟滚动以支持大数据量的渲染。

BaseTable 只提供基本的表格渲染能力，不需要依赖特定组件库，故其打包体积很小，但这也意味着一些常见的表格功能（排序、过滤、行选择、树状模式等）需要[在上层进行拓展](../pipeline).

## 基本用法

基本的 Table 包含行和列，使用 `columns` 属性来定义列的信息，使用传入的 `dataSource` 属性数据来创建行，这两个属性也是表格组件必传的 props（其他所有 props 都是可选的）。

- `dataSource` 提供表格数据，数组中的每一项对应表格的一行
- `columns` 指定表格中包含哪些列，`column.code` 与 `dataSource` 中的数据字段对应

以下是 BaseTable 的基本用法示例：

组件引入： `import { BaseTable } from 'ali-react-table'`

```jsx live open
function 基本用法() {
  const dataSource = [
    { prov: '湖北省', confirmed: 54406, cured: 4793, dead: 1457, t: '2020-02-15 19:52:02' },
    { prov: '广东省', confirmed: 1294, cured: 409, dead: 2, t: '2020-02-15 19:52:02' },
    { prov: '河南省', confirmed: 1212, cured: 390, dead: 13, t: '2020-02-15 19:52:02' },
    { prov: '浙江省', confirmed: 1162, cured: 428, dead: 0, t: '2020-02-15 19:52:02' },
    { prov: '湖南省', confirmed: 1001, cured: 417, dead: 2, t: '2020-02-15 19:52:02' },
  ]

  const columns = [
    { code: 'prov', name: '省份', width: 150 },
    { code: 'confirmed', name: '确诊', width: 100, align: 'right' },
    { code: 'cured', name: '治愈', width: 100, align: 'right' },
    { code: 'dead', name: '死亡', width: 100, align: 'right' },
    { code: 't', name: '最后更新时间', width: 180 },
  ]
  return <BaseTable dataSource={dataSource} columns={columns} />
}
```

## 更多用法

上述的例子展示了 BaseTable 的基本用法，更多用法可参考 [表格示例](examples)，也推荐在 [这个页面](/structure) 中了解表格的各部分的结构。

`BaseTable` 的详细 API 详见 [BaseTable API](api)
